<template>
  <div class="issueInfo">
    <el-form ref="form" :model="form" style="padding: 20px; flex: 1">
      <table class="tables">
        <!-- 新建建议 -->
        <tr>
          <td class="tabletitt">姓名<span style="color: red">*</span></td>
          <td>
            <el-form-item>
              <el-input
                v-model="form.name"
                placeholder="请输入姓名"
                @focus="handleFocus"
                :disabled="showDis"
              ></el-input>
            </el-form-item>
          </td>
          <td class="tabletitt">电话<span style="color: red">*</span></td>
          <td>
            <el-form-item>
              <el-input
                v-model="form.phone"
                placeholder="请输入电话"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </td>
        </tr>

        <!-- 新建建议 -->
        <tr>
          <td class="tabletitt">标题<span style="color: red">*</span></td>
          <td>
            <el-form-item>
              <el-input
                v-model="form.title"
                placeholder="请输入题目"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </td>
          <td class="tabletitt">类型<span style="color: red">*</span></td>
          <td>
            <el-form-item>
              <el-input
                v-model="form.type"
                placeholder="请输入类型"
                :disabled="tr"
              ></el-input>
            </el-form-item>
          </td>
        </tr>

        <!-- 新建建议 -->
        <tr>
          <td class="tabletitt" style="border-right: none">内容</td>
          <td colspan="4">
            <editor v-model="form.content" :min-height="400" :disabled="true" />
          </td>
        </tr>
        <tr class="proposal">
          <td class="tabletitt">附&nbsp;&nbsp;&nbsp;&nbsp;件</td>
          <td colspan="3">
            <div style="padding: 20px">
              <el-image
                v-for="(item, index) in form.file"
                :key="index"
                :src="baseUrl + item"
                :preview-src-list="getPreviewImgList(index, form.file)"
                style="width: 100px; height: 100px"
              ></el-image>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <div
              style="padding: 10px 0; display: flex; justify-content: center"
            >
              <el-button type="primary" @click="submit"> 立即提交 </el-button>
            </div>
          </td>
        </tr>
      </table>
    </el-form>
    <div class="issueInfo-schedule">
      <p>事项流转节点及进度</p>
      <el-steps
        :active="active"
        direction="vertical"
        align-center
        class="stepsStyle"
      >
        <template v-if="showDis">
          <el-step title="提交">
            <template slot="description">
              <span>{{ form.createTime }}<br />{{ form.name }}</span>
            </template>
          </el-step>

          <el-step :title="form.status == 2 ? '驳回' : '审核'">
            <template slot="description">
              <span
                >{{ form.processTime }}<br />
                审核员 <br />{{ form.status == 2 ? "驳回" : "审核" }}原因：{{
                  form.answer
                }}</span
              >
            </template>
          </el-step>
          <el-step title="反馈">
            <template slot="description">
              <span>{{ form.email }}<br />用户名<br />{{ form.remark }}</span>
            </template></el-step
          >
          <el-step title="完成"></el-step>
        </template>
      </el-steps>
    </div>
  </div>
</template>
<script>
import { getQuestion } from "@/api/digitization/home/index";
import { create } from "qrcode";
export default {
  data() {
    return {
      form: {},
      showDis: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      active: 0,
    };
  },
  methods: {
    handleFocus() {},
    submit() {},
    getPreviewImgList(index, imgArr) {
      let arr = [];
      let i = 0;
      for (i; i < imgArr.length; i++) {
        arr.push(this.baseUrl + imgArr[i + index]);
        if (i + index >= imgArr.length - 1) {
          index = 0 - (i + 1);
        }
      }
      return arr;
    },
  },
  created() {
    getQuestion(this.$route.params.userId).then((res) => {
      this.form = res.data;
      if (this.form.status == 1 || this.form.status == 2) {
        this.active = 2;
      }
      if (this.form.status == 0) {
        this.active = 1;
      }
      if (this.form.status == 3) {
        this.active = 4;
      }
      this.showDis = true;
    });
  },
};
</script>
<style lang="scss" scoped>
.issueInfo {
  width: 100%;
  display: flex;
  .issueInfo-schedule {
    width: 300px;
    padding: 20px;
    p {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
}
.stepsStyle {
  width: 100%;
  ::v-deep {
    .el-step__title.is-process,
    .el-step__title.is-wait {
      color: #c0c4cc !important;
      font-weight: 500 !important;
    }
    .el-step__head.is-process,
    .el-step__heads.is-wait {
      .el-step__icon.is-text {
        //这里设置的是下一步和等待状态里的文字颜色
        color: #c0c4cc !important;

        border-color: #c0c4cc !important;
      }
    }
    .el-step__head.is-finish {
      color: orange !important;
      .el-step__icon.is-text {
        //这里设置的是已完成状态里的文字颜色
        color: #fff !important;
        border-color: #c81616 !important;
        background: #c81616;
      }
    }
    // .el-step__icon {
    //   width: 40px;
    //   height: 40px;
    // }
    // .el-step.is-horizontal .el-step__line {
    //   top: 20px;
    // }
    // .el-step__icon-inner {
    //   font-weight: 500;
    //   font-size: 20px;
    // }
    .el-step__title.is-finish,
    .el-step__description.is-finish {
      color: #c81616 !important;
    }
    .el-step__line-inner {
      //这里设置的是完成后过渡线条颜色
      border-color: #c81616 !important;
    }
    .el-step__head.is-success,
    .el-step__title.is-success {
      //这里设置的是完成后的颜色
      color: #c81616 !important;
    }
  }
}
.tables {
  width: 100%;
  font-size: 16px;
  color: #666;
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
}

.tables td {
  border-bottom: 1px solid #bbb;
  border-right: 1px solid #bbb;
}

.tables tr {
  height: 50px;
}

.tabletitt {
  text-align: center;
}

.layui-upload {
  padding: 10px;
  margin-bottom: 20px;
}
.threeinput input {
  display: inline-block;
  width: 19%;
  padding-left: 10px;
}

.fatinput {
  width: 60%;
}

.sub {
  width: 275px !important;
  margin: 15px auto 0;
}
@media screen and (max-width: 1200px) {
  .tabletitt {
    width: 80px;
  }
  .threeinput input {
    display: block;
    width: 99%;
    margin: 5px 0;
  }
  .threeinput .fatinput {
    display: block;
    width: 99%;
  }
  .layui-input-inline {
    padding-left: 10px !important;
  }
}

@media screen and (max-width: 750px) {
  .tabletitt {
    width: 50px;
  }
  .layui-input-inline {
    padding-left: 5px !important;
  }
}

.namebutt-table {
  width: 100%;
}
.namebutt-table th {
  border-width: 1px;
  border-style: solid;
  border-color: #dcd8d8;
}
.namebutt-table td {
  text-align: center;
}
.namebutt-table tbody tr:hover,
.namebutt-table thead tr {
  background-color: #f2f2f2 !important;
}
.textline p {
  margin: 10px 0 10px 10px;
  font-weight: bold;
  color: #777;
}
.textline .red {
  color: red;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #1890ff;
  background: #1890ff;
}
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background: #fff;
}
::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  color: #000;
}
::v-deep .el-input.is-disabled .el-input__inner {
  color: #000;
}
::v-deep .el-input.is-disabled .el-input__inner {
  background: #fff !important;
}
::v-deep .el-form-item {
  margin-bottom: 0px;
}
::v-deep .title-input .el-input__inner {
  font-size: 31px;
  text-align: center;
  color: #000;
}
::v-deep .el-input__inner {
  border: none;
}
</style>
